<template>
    <section>
        <el-col align="right" >
            <div class="section paddingLR20">
                <el-button type="primary" v-if="allData.check_report_status != '1' || allData.check_report_status != '3' " @click="edit">编辑报告</el-button>
                 <!--<el-button type="primary" @click="preview">预览报告</el-button>-->
                <el-button type="primary" plain @click="cancel">返回</el-button>
            </div>
        </el-col>

        <el-col>
            <div class="section paddingLR20">
                <div class="head-item">
                    <div class="head-txt">{{currentData.check_unit_name}}作业</div>
                </div>
                <div class="head-item">
                    <div class="head-user">
                        <el-button v-for="data in allData.check_work" :key="data.id" :plain="data.id != currentData.id"
                                   type="primary"
                                   @click="show(data.id)">{{data.check_user_name}}
                        </el-button>
                    </div>
                </div>

            </div>

        </el-col>


        <el-col
            class="report-records-list"
        >
            <div class="section">
                <div class="head-item head-right" style="text-align: right;">
                    <div class="head-val">
                        <el-button type="info" v-if="currentData.check_status == '0'" disabled>未上传</el-button>
                        <el-button type="info" v-if="currentData.check_status == '2'" disabled>已打回</el-button>
                        <el-button type="info" v-if="allData.is_group != '1' && currentData.check_status == '1'" disabled>已提交</el-button>
                        <el-button type="danger" plain @click="reject" v-if="allData.is_group == '1' && currentData.check_status == '1'">打回作业
                        </el-button>
                    </div>
                </div>

                <div class="head-item" v-if="formatItemCount() != 0">
                    <div class="head-title">不合格检查项数量</div>
                    <div class="head-val"> <strong> {{formatItemCount()}} </strong></div>
                    <!--<div class="head-val" style="margin-left: 20px">
                        <span class="cyc cyc-margin cyc-green">&nbsp;</span>
                        <span>{{currentData.check_item_very_count}}</span>
                    </div>
                    <div class="head-val">
                        <span class="cyc cyc-margin cyc-orange">&nbsp;</span>
                        <span>{{currentData.check_item_con_count}}</span>
                    </div>
                    <div class="head-val">
                        <span class="cyc cyc-margin cyc-red">&nbsp;</span>
                        <span>{{currentData.check_item_uncount}}</span>
                    </div>-->
                </div>
            </div>
            <div  v-if="currentData.check_status != '0' && currentData.check_status != '2'">
                <div class="body-item" v-if="currentData.suggestion">
                    <div class="body-title">综合意见</div>
                    <div class="body-val" style="line-height:1.45em; margin:0;">
                        <el-input
                                :autosize="true"
                                type="textarea"
                                resize="none"
                                class="showTextConter"
                                v-model="currentData.suggestion"
                                readonly>

                        </el-input>
                    </div>
                </div>
                <div class="body-item" v-if="currentData.check_status==='1'" >
                    <div class="body-title">检查项</div>
                    <div v-for="item in currentData.check_item_desc" class="body-inspect">
                        <div class="inspect-title">
                            <!--   <span :class="'cyc cyc-' + formatCyc(item.check_content_status)"></span>
                               <span class="star">{{ formatStar(item.star_level) }}</span>-->
                            <span>{{item.check_item_three_order_number + '.&nbsp;' + item.check_item_three}}</span>
                        </div>
                        <div class="inspect-info" v-if="item.image_list">
                            <div class="info-title">图片</div>
                            <div class="info-img">
                                <img v-for="img in item.image_list" @click="showImg(img.path)" :src="fixUrl(img.path)"/>
                            </div>
                        </div>
                        <div class="inspect-info" v-if="item.building_room">
                            <div class="info-title">楼宇 - 房间号</div>
                            <div>
                                <el-tag  v-for="(lab, index) in item.building_room" :key="index" class="info-item" type="success" style="margin-right:15px;">{{lab.building}}</el-tag>
                            </div>
                        </div>
                        <div class="inspect-info" v-if="item.desc" style="margin-top:20px;">
                            <div class="info-title">描述信息</div>
                            <div >
                                <el-input

                                        type="textarea"
                                        v-model="item.desc"
                                        :autosize="true"
                                        resize="none"
                                        class="showTextConter"
                                        readonly>

                                </el-input>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else>
                <span>未上传相关作业</span>
            </div>
        </el-col>
        <!--对话框-显示大图-->
        <el-dialog title="显示大图" :visible.sync="big_img_dialog.show">
            <img class="big-img" :src="big_img_dialog.path">
        </el-dialog>
    </section>
</template>

<script>
    import * as api from '../../api/report_api'
    import {rejectRecords} from '../../api/records_api'
    import dict from '../../common/js/dict';
    import {getResourceUrl} from '../../api/common';

    export default {
        data() {
            return {
                loading: false,
                big_img_dialog: {
                    show: false,
                    path: ''
                },
                resource_url: '',
                allData: [],
                //表格数据
                currentData: {}
            }
        },
        methods: {
            showImg(path) {
                this.big_img_dialog.path = this.fixUrl(path);
                this.big_img_dialog.show = true;
            },
            reject() {

                this.$confirm('确认打回此作业吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false,   //不通过点击遮罩关闭弹框
                    type: 'info'
                }).then(() => {

                    let params = {
                        id: this.currentData.id
                    };

                    rejectRecords(params).then((res) => {
                        if (res.data.status == 200) {
                            this.$message({
                                type: 'success',
                                message: '打回作业成功!'
                            });

                            this.currentData.check_status = "2";
                        } else {
                            if (res.data.status == 401) {
                                this.$router.push('/login');
                            }
                            this.$message.error(res.data.status + " " + res.data.msg);
                        }
                    });

                }).catch((e) => {
                    /*this.$message({
                        type: 'info',
                        message: e.message
                    });*/
                });
            },
            cancel(){
                this.$router.push('/report/list');
            },
            preview(){
                this.$router.push('/report/view/' + this.$route.params.id);
            },
            edit() {
                this.$router.push('/report/detail/' + this.$route.params.id);
            },
            show(id) {
                if (id == this.currentData.id) {
                    return;
                }
                let index = this.allData.check_work.findIndex(function (value, index, arr) {
                    return value.id == id;
                });

                if (index > -1) {
                    this.currentData = this.allData.check_work[index];
                }
            },
            formatCyc(status) {
                switch (status.toString()) {
                    case '0':
                        return 'red';
                    case '2':
                        return 'green';
                    case '1':
                    default:
                        return 'orange';
                }
            },
            formatItemCount() {
                return  parseInt(this.currentData.check_item_uncount);
            },
            formatStar(cnt) {
                switch (cnt) {
                    case '1':
                        return '★';
                    case '2':
                        return '★★';
                    case '3':
                        return '★★★';
                    case '0':
                    default:
                        return '';
                }
            },
            fixUrl(url) {
                if (url && url.length > 0 && url.toLowerCase().indexOf("http:") != 0) {
                    return this.resource_url + url;
                }
                return url;
            },
            //初始化页面
            initData() {
                if (this.resource_url.length == 0) {
                    getResourceUrl().then((res) => {
                        if (res.data.status == 200) {
                            this.resource_url = res.data.datas;
                        } else {
                        }
                    });
                }

                let params = {
                    id: this.$route.params.id
                };
                api.checkReport(params).then((res) => {
                    if (res.data.status == 200) {
                        let data = JSON.parse(res.data.datas);

                        if (data && data.check_work && data.check_work.length > 0) {

                            for(let i = 0; i < data.check_work.length; i++){
                                let data_item = data.check_work[i];

                                data_item.check_item_desc = data_item.check_item_desc.sort(function (a, b) {
                                    return a.check_item_three_item_order - b.check_item_three_item_order;
                                });
                            }

                            this.allData = data;
                            this.currentData = this.allData.check_work[0];
                        }
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                });
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>

<style scoped>
    .head-right{
        position:absolute;
        right:20px;
        top:20px;
    }
    .head-item {
        margin-bottom: 15px;
        text-align: left;
    }

    .head-txt {
        font-size: 24px;
        font-weight: bold;
        color:#333;
        padding-bottom:20px;
    }

    .head-user {
        margin: 10px 0 20px 0;
    }

    .head-title {
        color: #000;
        display: inline-block;
        width: 130px;
        margin-right: 10px;
        font-weight: bold;
    }

    .head-val {
        display: inline-block;
        color: #666;
        line-height:10px
    }

    .head-val span {
        margin-right: 10px;
    }

    .section {
    }

    .cyc {
        border-radius: 5px;
        width: 10px;
        height: 10px;
        display: inline-block;
        display: -webkit-inline-box;
    }

    .cyc-margin {
        margin: 0 5px 0 10px;
    }

    .cyc-green {
        background-color: #7ED321;
    }

    .cyc-orange {
        background-color: #F5A623;
    }

    .cyc-red {
        background-color: #D0021B;

    }

    .body-item {
        margin-top: 5px;
    }

    .body-title {
        color: #000;
        margin-top: 10px;
        font-weight: bold;
    }

    .body-val {
        margin-top: 10px;
        padding: 10px 0;

    }

    .body-inspect {
        margin-top: 10px;
        border: solid 1px #eceaea;
        padding: 20px 30px;
        margin-bottom: 15px;
    }

    .inspect-title {
        color: #000;
        font-size:16px;
        padding-bottom:20px;
    }

    .star {
        margin: 0 3px;
    }

    .inspect-info {

    }

    .info-title {
        color: #000;

        font-weight: bold;
    }

    .info-img,
    .info-item {
        /*margin-top: 10px;*/
    }

    .info-img img {
        cursor:pointer;
        height: 75px;
        width: 75px;
        margin-right: 15px;
        display: inline-block;
    }

    .info-item {
    }
    .big-img{
        max-width: 100%;
    }
    .report-records-list{
        position:relative;
        padding:0 20px 20px;
        margin: 0 auto;
    }

    .report-records-list .section{
        border-top:1px solid #eee;
        padding-top:20px;
    }

    .paddingLR20{
        padding:0 20px;
    }
</style>
